<template>
    <a-modal v-model="filterVisible" title="差分" :footer="null" :centered="true">
        <div class="variables">
            <div class="h2">选择变量：<a-checkbox @click="selectAll" :indeterminate="checkedList.length>0&&checkedList.length<list.length" :checked="checkedList.length===list.length&&list.length>0">全选</a-checkbox></div>
            <div class="list">
                <a-checkbox-group v-model="checkedList">
                    <div class="check-item" v-for="item in list" :key="item.index">
                        <a-checkbox :value="item.index">{{item.name}}</a-checkbox>
                    </div>
                </a-checkbox-group>
            </div>
        </div>

        <div class="options">
            <div class="h2">方法：</div>
            <a-radio-group v-model="selectedWay">
                <a-radio :style="radioStyle" :value="'diff'">
                    差分步数
                    <a-input-number v-model="number1" :disabled="selectedWay!=='diff'" size="small" />
                </a-radio>
                <a-radio :style="radioStyle" :value="'step'">
                    差分阶数
                    <a-input-number v-model="number2" :disabled="selectedWay!=='step'" size="small" />
                </a-radio>
            </a-radio-group>
        </div>

        <div class="btns">
            <a-button type="primary" ghost @click="cancel">取消</a-button>
            <a-button type="primary" @click="goApply">应用</a-button>
        </div>
    </a-modal>
</template>

<script>
import { messageTips } from '../../../until/tools';
export default {
    props:['visible','sheetId'],
    data() {
        return {
            filterVisible:false,
            list:[],
            checkedList:[],
            radioStyle: {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
            },
            selectedWay:'diff',
            number1:null,
            number2:null,
        }
    },
    watch:{
        visible(value) {
            if(value) {
                this.checkedList = [];
                this.selectedWay = 'diff';
                this.number1 = null;
                this.number2 = null;
                this.$http.cloud_get_variables({action:'regression',sheetId:this.sheetId}).then(res=>{
                    if(res.deptVars) {
                        this.list = res.deptVars;
                    }
                })
                this.filterVisible = true;

            }
        }
    },
    methods:{
        cancel() {
            this.filterVisible = false;
        },
        selectAll() {
            if(this.checkedList.length === this.list.length) {
                this.checkedList = [];
            } else {
                this.list.forEach(item=>{
                    let index = this.checkedList.indexOf(item.index);
                    if(index===-1) {
                        this.checkedList.push(item.index);
                    }
                });
            }            
        },
        goApply() {
            if(this.checkedList.length===0) {
                messageTips('请选择变量',2);
                return false;
            }
            let params = {
                action:'diff',
                indexs:this.checkedList.join(','),
                method:this.selectedWay,
                sheetId:this.sheetId,
            }
            if(this.selectedWay==='diff') {
                if(!this.number1) {
                    messageTips('请输入差分步数',2);
                    return false;
                } else {
                    params.difforder = this.number1;
                }
            }
            if(this.selectedWay==='step') {
                if(!this.number2) {
                    messageTips('请输入差分步数',2);
                    return false;
                } else {
                    params.difforder = this.number2;
                }
            }
            this.$emit('setDiffResult',{data:params});
            this.filterVisible = false;
        },
    }
}
</script>

<style lang="scss" scoped>
    .h2 {
        font-weight: bold;
        .ant-checkbox-wrapper {
            font-weight:normal;
        }
    }
    .variables {
        .list {
            height:150px;
            border:1px solid #ddd;
            margin:10px 0;
            padding:5px 10px;
            overflow-y: auto;
            .check-item {
                padding:3px 0;
            }
        }
    }
</style>